import { getSvg, getLogin, getUpdateId, getloginREN } from '../../api/api';
import React from "react";
import { useState, useEffect } from 'react'
import { Mask, Space } from 'antd-mobile'
// import { DemoBlock } from 'demos'
import './Login.css'
import { Tabs, } from 'react-vant';
import { Qr, } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom'
import { Input, Button, message, Modal } from 'antd';


const items = Array.from([
    {
        key: '1',
        label: '账号登录',

    },
    {
        key: '2',
        label: '手机登录',

    },
])
interface propsInputs {

}
export default function Inputs(props: propsInputs) {
    const navigate = useNavigate()
    const [nums, setNums] = useState(1)
    const [phone, setPhone] = useState('')
    const [password, setPassword] = useState('')
    const [showPassword, setShowPassword] = useState<boolean>(false);

    const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

    const validatePassword = () => {
        if (!passwordRegex.test(password)) {
            message.error('密码必须至少 8 位，且包含字母、数字和特殊字符');

            setPassword('')
            return false;
        }
        message.success('密码有效');
        return true;
    };
    const [visible, setVisible] = useState(false)
    const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setPassword(e.target.value);
    };
    const [seconds, setSeconds] = useState('')


    const [second, setSecond] = useState<number>(3);
    const [yanName, setYanName] = useState<any | number>('验证码');
    const [isActive, setIsActive] = useState<boolean>(false);
    const [isShow, setIsShow] = useState<boolean>(true);

    const [code, setCode] = useState<any>()
    const [userlist, setUserlist] = useState([])
    const [userId, setUserId] = useState('67b529f89288e1d2fcaba48c')//登录ID
    const [isShows, setIsShows] = useState<boolean>(true)

    const [listLogin, setListLogin] = useState([])

 
    const getYan = (event: React.MouseEvent<HTMLButtonElement>) => {
        setIsActive(true);
    }
    const getLoginListOne = async () => {
        let { data: { code, msg, listLogin } } = await getloginREN(undefined)
        setListLogin(listLogin)
    }
    useEffect(() => {
        getLoginListOne()
    }, [password])
    const getLoginList = () => {
        async function getList() {
            let addfrom = { phone: phone, password: password, seconds: seconds }
            let { data: { code, msg, token } } = await getLogin(addfrom)

            if (code == 200) {
                Modal.info({
                    title: '提示',
                    content: (
                        <div>
                            <p>{msg}</p>
                        </div>
                    ),
                    onOk() {
                        console.log('Confirmed');
                    },
                });
                localStorage.setItem('token', token)
                localStorage.setItem('_id', userId)
                navigate('/home/show')
                sessionStorage.setItem('integralShop', JSON.stringify({ flag: true }))

            } else {
                Modal.info({
                    title: '提示',
                    content: (
                        <div>
                            <p>{msg}</p>
                        </div>
                    ),
                    onOk() {
                        console.log('Confirmed');
                    },
                });
                localStorage.setItem('token', 'kon')
                localStorage.setItem('_id','kon')
                navigate('/')
            }
        }
        getList()
    }
    const getSvgCode = () => {
        async function svgS() {
            let addfrom = {}
            let { data: { code, msg, info, userlist } } = await getSvg(addfrom);
            setUserlist(userlist)
            if (code == 200) {
                setCode(info.data)
                let addfrom = { _id: userId, seconds: info.text }
                let { data: { code, msg } } = await getUpdateId(addfrom)
            }
        }
        svgS()
    }
    useEffect(() => {
        let interval = null as any
        if (isActive && second > 0) {
            interval = setInterval(() => {
                setSecond(prevSeconds => prevSeconds - 1);
                setYanName(second)
            }, 1000)
        }
        else if (second == 0) {
            clearInterval(interval)
            setYanName('发验证码')
            setSecond(3)
            getSvgCode()//图片验证码的调用
            setIsActive(false)

        }
        return () => clearInterval(interval);
    }, [isActive, second, isShow])
    return (
        <div>
            <div className="loginOne" style={{ marginTop: '8rem', }}>
                <img style={{ position: 'relative', left: '27.2rem', }} src="https://cdn8.axureshop.com/demo2025/2323798/images/%E7%99%BB%E5%BD%95%E9%A1%B5/u42.svg" alt=""

                />
                <Qr onClick={() => setVisible(true)} className='qr' style={{ fontSize: '2.7rem', position: 'relative', left: '23.3rem', top: '-3rem', color: 'white' }} />
                <Tabs defaultActive={2} onClickTab={(key) => { setNums(key.name + 1) }} >
                    {items.map((item) => (
                        <Tabs.TabPane key={item.key} title={`${item.label}`} >
                        </Tabs.TabPane>
                    ))}
                </Tabs>
                <hr />
                {nums == 1 ? <div className='shoucope'>
                    <div style={{ width: '27rem', marginTop: '1rem' }}>
                        <Input
                            className='inputone'
                            value={phone}
                            onChange={(e) => { setPhone(e.target.value) }}
                            placeholder="请输入用户名"
                        />
                        <br></br>
                    </div>

                    <div style={{ width: '27rem', marginTop: '1.5rem' }}>
                        <Input
                            className='inputone'
                            type={showPassword ? 'text' : 'password'}
                            value={password}
                            onChange={handlePasswordChange}
                            placeholder="请输入密码"
                            suffix={
                                <Button type="link" onClick={() => {
                                    validatePassword();
                                    setShowPassword(!showPassword);
                                }}>
                                    {showPassword ? '隐藏' : '显示'}
                                </Button>
                            }
                        />

                    </div>
                    <div className="shoucopetwo">
                        <div>
                            <input type="checkbox" style={{ marginTop: '0.2rem' }} /><span >自动登录</span>
                        </div> <span style={{ color: 'RGB(88,142,254)' }} onClick={() => navigate('/yupdate')}>忘记密码?</span>
                    </div>
                    <button onClick={getLoginList} disabled={isShows} className="loginButton">登录</button>
                    <div className='shoucopeyYF' >
                        {listLogin ? <span style={{ color: 'RGB(88,142,254)' }} onClick={() => navigate('/renLian')}>人脸登录</span> : undefined}
                        <span style={{ color: 'RGB(88,142,254)' }} onClick={() => navigate('/register')}>注册账号</span>
                    </div>
                    <div className='shoucopes' >
                        <div>
                            <input type="checkbox" style={{ marginTop: '0.2rem', fontSize: '1rem' }} onChange={() => { setIsShows(!isShows) }} /><span >
                                我已阅读同意 <span style={{ color: 'RGB(88,142,254)' }} onClick={() => navigate('/shuo')}>隐私政策、服务协议</span>
                            </span>
                        </div>
                    </div>
                </div> : undefined}
                {nums == 2 ? <div style={{ marginTop: '1rem', marginLeft: '4rem', width: '27rem', height: '29rem', border: '1px solid', borderRadius: '0.5rem' }}>
                    <div style={{ width: '27rem', marginTop: '1rem' }}>
                        <Input
                            className='inputone'
                            value={phone}
                            onChange={(e) => {
                                setPhone(e.target.value)

                            }}
                            placeholder="请输入手机号"
                        />
                        <br></br>
                    </div>
                    {/* <div style={{ width: '27rem', marginTop: '1.5rem', }}>
                        <Input
                            className='inputone'
                            type={showPassword ? 'text' : 'password'}
                            value={password}
                            onChange={handlePasswordChange}
                            placeholder="请输入密码"
                            suffix={
                                <Button type="link" onClick={() => {
                                    validatePassword();
                                    setShowPassword(!showPassword);
                                }}>
                                    {showPassword ? '隐藏' : '显示'}
                                </Button>
                            }
                        />
                    </div> */}
                    <div style={{ width: '27rem', marginTop: '1rem', display: 'flex' }}>
                        <Input
                            style={{ width: '13rem', height: '4rem', fontSize: '1.4rem', marginLeft: '1rem' }}
                            value={seconds}
                            onChange={(e) => { setSeconds(e.target.value) }}
                            placeholder="请输入4位验证码"
                        />

                        <button onClick={getYan} style={{ width: '9rem', marginLeft: '3rem', backgroundColor: 'RGB(100,150,234)', color: 'white', border: 'none', borderRadius: '0.4rem', fontSize: '1.4rem' }}>
                            {yanName == '发验证码' ? <div dangerouslySetInnerHTML={{ __html: code }} ></div> : <span>{yanName}</span>}
                        </button>
                    </div>
                    <div style={{ marginTop: '0.3rem', width: '25rem', height: '2rem', fontSize: '1.4rem', marginLeft: '1rem', display: 'flex', justifyContent: 'space-between' }}>
                        <div>
                            <input type="checkbox" style={{ marginTop: '0.2rem' }} /><span >自动登录</span>
                        </div> <span style={{ color: 'RGB(88,142,254)' }}>忘记密码?</span>
                    </div>
                    <button onClick={getLoginList} disabled={isShows} className="loginButton">登录</button>
                    <div className='shoucopeOne'>
                        <div>
                            <input type="checkbox" style={{ marginTop: '0.2rem', fontSize: '1rem' }} onChange={() => { setIsShows(!isShows) }} /><span >
                                我已阅读同意 <span style={{ color: 'RGB(88,142,254)' }} onClick={() => navigate('/shuo')}>隐私政策、服务协议</span>
                            </span>
                        </div>
                    </div>
                </div> : undefined}
            </div>
            <Mask visible={visible} onMaskClick={() => setVisible(false)} >
                <div style={{ width: '25rem', height: '25rem', marginTop: '28rem', marginLeft: '9rem', backgroundColor: 'white' }}>
                     <img src="https://img2.baidu.com/it/u=839922839,306118709&fm=253&app=138&size=w931&n=0&f=GIF&fmt=auto?sec=1740330000&t=e451fd3f8a7a744ac258508e06614590"  style={{ width: '25rem', height: '25rem',}} alt=""/>
                </div>
            </Mask>
        </div>
    )
}